<template>
  <div class="teshu">
    <el-card class="box-card" style="height:800px">
      <div slot="header" class="clearfix">
        <span>
          <navigation />
        </span>
      </div>
      <el-form :inline="true" :model="planSerFrom" class="demo-form-inline">
        <el-form-item label="重点工作:">
          <el-select
            clearable
            @change="taskChange"
            filterable
            v-model="planSerFrom.taskId"
            placeholder="请选择"
          >
            <el-option v-for="item in taskList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目标任务名称:">
          <el-select clearable v-model="planSerFrom.subTaskId" filterable placeholder="请选择">
            <el-option
              v-for="item in subTaskList"
              :key="item.id"
              :label="item.targetName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-table
        border
        :data="taskTableData"
        style="width: 100%"
        height="640px"
        size="small"
        row-key="id"
        :tree-props="{children: 'subtasks', hasChildren: 'hasChildren'}"
      >
        <el-table-column align="center" width="60" prop="index" label="序号"></el-table-column>
        <el-table-column align="center" prop="targetName" label="目标任务名称"></el-table-column>
        <!-- <el-table-column align="center" prop="targetName" label="牵头部门"></el-table-column> -->
        <el-table-column align="center" label="一季度">
          <el-table-column align="center" width="80" prop="oneQuarterNumber" label="任务量"></el-table-column>
          <el-table-column align="center" width="80" prop="oneQuarterDegree" label="实际完成量"></el-table-column>
          <el-table-column align="center" width="80" prop="oneNumber" label="本季度完成率"></el-table-column>
          <el-table-column align="center" width="80" prop="oneAllYearNumber" label="全年目标完成率"></el-table-column>
        </el-table-column>
        <el-table-column align="center" label="二季度">
          <el-table-column align="center" width="80" prop="twoQuarterNumber" label="任务量"></el-table-column>
          <el-table-column align="center" width="80" prop="twoQuarterDegree" label="实际完成量"></el-table-column>
          <el-table-column align="center" width="80" prop="twoNumber" label="本季度完成率"></el-table-column>
          <el-table-column align="center" width="80" prop="twoAllYearNumber" label="全年目标完成率"></el-table-column>
        </el-table-column>
        <el-table-column align="center" label="三季度">
          <el-table-column align="center" width="80" prop="threeQuarterNumber" label="任务量"></el-table-column>
          <el-table-column align="center" width="80" prop="threeQuarterDegree" label="实际完成量"></el-table-column>
          <el-table-column align="center" width="80" prop="threeNumber" label="本季度完成率"></el-table-column>
          <el-table-column align="center" width="80" prop="threeAllYearNumber" label="全年目标完成率"></el-table-column>
        </el-table-column>
        <el-table-column align="center" label="全年">
          <el-table-column align="center" width="80" prop="allNumber" label="任务量"></el-table-column>
          <el-table-column align="center" width="80" prop="allDegree" label="实际完成量"></el-table-column>
          <el-table-column align="center" width="80" prop="allNumberA" label="本季度完成率"></el-table-column>
          <el-table-column align="center" width="80" prop="allYearNumber" label="全年目标完成率"></el-table-column>
        </el-table-column>
        <el-table-column align="center" label="操作" width="140">
          <template slot-scope="scope">
            <el-button
              type="text"
              v-if="returnSubtasks(scope.row.subtasks)"
              @click="routerPath(scope.row)"
            >查看配合单位</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-pagination
              background
              layout="prev, pager, next"
              @current-change="dataTotal"
              :page-size="pageSize"
              :current-page="pageNum"
              :total="total"
      ></el-pagination>-->
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      planSerFrom: {
        taskId: "",
        subTaskId: "",
        departmentId: "",
        quarter: "", //季度
        achieve: "", //完成率
      },
      taskList: [],
      subTaskList: [],
      taskTableData: [{ name: "132" }],
      Department: [],
      quarterList: [
        { id: 1, name: "第一季度" },
        { id: 2, name: "第二季度" },
        { id: 3, name: "第三季度" },
        { id: 4, name: "第四季度" },
      ],
      achieveList: [
        { id: 1, name: "1~25%" },
        { id: 2, name: "26~50%" },
        { id: 3, name: "51~75%" },
        { id: 4, name: "76~100%" },
      ],
      // pageSize:20,
      // pageNum:1,
      // total:0
    };
  },
  mounted() {
    this.getTaskList();
    this.getListByPage();
    this.getDepartment();
  },
  methods: {
    getDepartment() {
      this.$axios
        .post("dept/getList")
        .then((res) => {
          if (res.code == 200) {
            this.Department = res.data;
            // console.log(this.Department);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    returnSubtasks(row) {
      // console.log(row);
      if (row == null || row == undefined) {
        return false;
      } else {
        if (row.length == 0) {
          return true;
        } else {
          return false;
        }
      }
    },
    // 获取重点任务
    getTaskList() {
      this.$axios
        .post("/task/getAllList")
        .then((res) => {
          if (res.code == 200) {
            this.taskList = res.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    taskChange(val) {
      if (val) {
        this.planSerFrom.subTaskId = "";
        this.planSerFrom.departmentId = "";
        this.getListByPage();
      }
    },
    taskChange2(val) {
      if (val) {
        this.planSerFrom.departmentId = "";
        //this.getListByPage();
      }
    },
    taskChange3(val) {
      // if (val) {
      //   this.getListByPage();
      // }
    },
    // 获取目标任务
    getsubTaskList(data) {
      this.$axios
        .post("distribution/getList", { taskId: data })
        .then((res) => {
          if (res.code == 200) {
            this.subTaskList = res.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 搜索
    onSubmit() {
      this.getListByPage();
    },
    // 获取列表
    getListByPage() {
      let _flag = this.planSerFrom.subTaskId;
      let _depId = this.planSerFrom.departmentId;
      let obj = {
        departmentId: this.planSerFrom.departmentId, //指标id
        taskId: this.planSerFrom.taskId, //重点工作
        id: this.planSerFrom.subTaskId,
      };
      this.$axios
        .post("distribution/getTaskSpeedList", obj)
        .then((res) => {
          if (res.code == 200) {
            this.taskTableData = res.data;
            this.taskTableData.forEach((item, index) => {
              item.index = index + 1;
              item.oneNumber = this.decimal(item.oneNumber);
              item.twoNumber = this.decimal(item.twoNumber);
              item.threeNumber = this.decimal(item.threeNumber);
              item.allNumberA = this.decimal(item.allNumberA);
              item.oneAllYearNumber = this.decimal(item.oneAllYearNumber);
              item.twoAllYearNumber = this.decimal(item.twoAllYearNumber);
              item.threeAllYearNumber = this.decimal(item.threeAllYearNumber);
              item.allYearNumber = this.decimal(item.allYearNumber);
              item.index = index + 1;
              // 第一季度
              if (item.oneQuarterDegreeCaveat == 1) {
                item.imgUrl1 = require("../../assets/img/redFlag.png");
              } else if (item.oneQuarterDegreeCaveat == 0) {
                item.imgUrl1 = require("../../assets/img/redLight.png");
              } else {
                item.imgUrl1 = null;
              }
              // 第二季度
              if (item.twoQuarterDegreeCaveat == 1) {
                item.imgUrl2 = require("../../assets/img/redFlag.png");
              } else if (item.twoQuarterDegreeCaveat == 0) {
                item.imgUrl2 = require("../../assets/img/redLight.png");
              } else {
                item.imgUrl2 = null;
              }
              // 第三季度
              if (item.threeQuarterDegreeCaveat == 1) {
                item.imgUrl3 = require("../../assets/img/redFlag.png");
              } else if (item.threeQuarterDegreeCaveat == 0) {
                item.imgUrl3 = require("../../assets/img/redLight.png");
              } else {
                item.imgUrl3 = null;
              }
              // 第四季度
              if (item.allDegreeCaveat == 1) {
                item.imgUrl4 = require("../../assets/img/redFlag.png");
              } else if (item.allDegreeCaveat == 0) {
                item.imgUrl4 = require("../../assets/img/redLight.png");
              } else {
                item.imgUrl4 = null;
              }
            });
            if (!_flag) {
              let result = [];
              let obj = {};
              let arr = this.taskTableData;
              // console.log(arr)
              arr.forEach((i, key) => {
                if (i.targetName == "" || i.targetName == null) {
                } else {
                  result.push(i);
                }
              });
              // console.log(result)
              this.subTaskList = result;
            }

            // if (!_depId) {
            //   let result = [];
            //   let obj = {};
            //   let arr = this.taskTableData;
            //   for (var i = 0; i < arr.length; i++) {
            //     if (!obj[arr[i].departmentId]) {
            //       result.push(arr[i]);
            //       obj[arr[i].departmentId] = true;
            //     }
            //   }
            //   this.Department = result;
            // }
          }
        })
        .catch((err) => {});
    },
    // 搜索获取列表
    getListQuarter() {
      let obj = {
        quarter: this.planSerFrom.quarter,
        departmentId: this.planSerFrom.departmentId, //指标id
        taskId: this.planSerFrom.taskId, //重点工作
        targetName: this.planSerFrom.subTaskId,
      };

      if (this.planSerFrom.achieve != "") {
        if (this.planSerFrom.quarter == "") {
          this.$message.error("要使用完成率搜索,请先选择季度！");
          return;
        }
      }

      let _this = this.planSerFrom;
      if (_this.achieve == 1) {
        obj.smallNum = 0.01;
        obj.largeNum = 0.25;
      } else if (_this.achieve == 2) {
        obj.smallNum = 0.26;
        obj.largeNum = 0.5;
      } else if (_this.achieve == 3) {
        obj.smallNum = 0.51;
        obj.largeNum = 0.75;
      } else if (_this.achieve == 4) {
        obj.smallNum = 0.76;
        obj.largeNum = 1;
      }
      this.$axios
        .post("/distribution/getListQuarter", obj)
        .then((res) => {
          if (res.code == 200) {
            this.taskTableData = res.data;
            this.taskTableData.forEach((item, index) => {
              item.oneNumber = this.decimal(item.oneNumber);
              item.twoNumber = this.decimal(item.twoNumber);
              item.threeNumber = this.decimal(item.threeNumber);
              item.allNumberA = this.decimal(item.allNumberA);
              item.oneAllYearNumber = this.decimal(item.oneAllYearNumber);
              item.twoAllYearNumber = this.decimal(item.twoAllYearNumber);
              item.threeAllYearNumber = this.decimal(item.threeAllYearNumber);
              item.allYearNumber = this.decimal(item.allYearNumber);
              item.index = index + 1;
            });
            console.log(_flag);
            // if (!_flag) {
            //   let result = [];
            //   let obj = {};
            //   let arr = this.taskTableData;
            //   for (var i = 0; i < arr.length; i++) {
            //     if (!obj[arr[i].targetName]) {
            //       result.push(arr[i]);
            //       obj[arr[i].targetName] = true;
            //     }
            //   }
            //   this.subTaskList = result;
            // }

            // if (!_depId) {
            //   let result = [];
            //   let obj = {};
            //   let arr = this.taskTableData;
            //   for (var i = 0; i < arr.length; i++) {
            //     if (!obj[arr[i].departmentId]) {
            //       result.push(arr[i]);
            //       obj[arr[i].departmentId] = true;
            //     }
            //   }
            //   this.Department = result;
            // }
          }
        })
        .catch((err) => {});
    },
    decimal(val) {
      if (val != null) {
        let _val = val * 100;
        _val = _val.toFixed(2);
        return _val + "%";
      } else {
        return "0%";
      }
    },
    // dataTotal(val) {
    //   this.pageNum = val;
    //   this.getListByPage();
    // },
    routerPath(val) {
      this.$router.push({
        path: "/depPlanSummary2",
        query: { id: val.id },
      });
    },
  },
};
</script>
<style scoped>
.el-select-dropdown__item{
  width: 300px  !important;
}
/* .teshu .el-scrollbar__wrap{
  width: 300px  !important;
} */
</style>
